<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter与原生通讯01》 - 飞雪无情的博客</title><meta name="Description" content="专注于IT互联网，包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"><meta property="og:title" content="《Flutter与原生通讯01》" />
<meta property="og:description" content="
本文主要介绍Flutter Plugin原理以及其开发和发布过程。

前言
Flutter优势主要体现在UI上&ndash;高性能且跨平台表现一致。但是针对平台(Android、IOS)的实现，如：获取电量、判断WiFi使用、调起WebView加载网页等，得调用特定平台的API包。Flutter Plugin就是为调用平台API而生。
下文中所提及到的&quot;平台&quot;指的是Android、IOS两端。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.flysnow.org/posts/flutter/flutter%E4%B8%8E%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/" />
<meta property="article:published_time" content="2021-05-19T00:19:22+08:00" />
<meta property="article:modified_time" content="2021-05-19T00:19:22+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="《Flutter与原生通讯01》"/>
<meta name="twitter:description" content="
本文主要介绍Flutter Plugin原理以及其开发和发布过程。

前言
Flutter优势主要体现在UI上&ndash;高性能且跨平台表现一致。但是针对平台(Android、IOS)的实现，如：获取电量、判断WiFi使用、调起WebView加载网页等，得调用特定平台的API包。Flutter Plugin就是为调用平台API而生。
下文中所提及到的&quot;平台&quot;指的是Android、IOS两端。"/>
<meta name="application-name" content="飞雪无情的博客">
<meta name="apple-mobile-web-app-title" content="飞雪无情的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://www.flysnow.org/posts/flutter/flutter%E4%B8%8E%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/" /><link rel="prev" href="https://www.flysnow.org/posts/flutter/flutter%E5%AD%A6%E4%B9%A0%E7%9B%AE%E5%BD%95/" /><link rel="next" href="https://www.flysnow.org/posts/flutter/Flutter%E8%8E%B7%E5%8F%96%E9%80%9A%E8%AE%AF%E5%BD%95%E5%A5%BD%E5%8F%8B/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter与原生通讯01》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/www.flysnow.org\/posts\/flutter\/flutter%E4%B8%8E%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF\/"
        },"genre": "posts","keywords": "flutter, 原生通讯","wordcount":  2978 ,
        "url": "https:\/\/www.flysnow.org\/posts\/flutter\/flutter%E4%B8%8E%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF\/","datePublished": "2021-05-19T00:19:22+08:00","dateModified": "2021-05-19T00:19:22+08:00","publisher": {
            "@type": "Organization",
            "name": "飞雪无情"},"author": {
                "@type": "Person",
                "name": "飞雪无情"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">飞雪无情的博客</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/tools/">工具</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/archives/">归档</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter与原生通讯01》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>飞雪无情</a></span>&nbsp;<span class="post-category">included in <a href="/categories/Flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a>&nbsp;<a href="/categories/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/"><i class="far fa-folder fa-fw"></i>原生通讯</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-05-19">2021-05-19</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;2978 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;6 minutes&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#前言">前言</a></li>
    <li><a href="#介绍">介绍</a>
      <ul>
        <li><a href="#flutter-plugin">Flutter Plugin</a></li>
        <li><a href="#platform-channels">Platform Channels</a></li>
      </ul>
    </li>
    <li><a href="#创建flutter-plugin">创建Flutter Plugin</a>
      <ul>
        <li><a href="#第一步选择创建一个flutter-project">第一步：选择创建一个Flutter project</a></li>
        <li><a href="#第二步选择flutter-project的类型为flutter-plugin">第二步：选择Flutter Project的类型为Flutter Plugin</a></li>
        <li><a href="#第三步填写project-name等工程信息完成flutter-plugin创建">第三步：填写Project name等工程信息，完成Flutter Plugin创建。</a></li>
        <li><a href="#使用android模拟器运行example工程">使用Android模拟器运行example工程</a></li>
        <li><a href="#示例工程-examplelibmaindart">示例工程 example/lib/main.dart</a></li>
        <li><a href="#flutter-plugin中dart-api实现-libflutter_plugin_egdart">Flutter Plugin中dart API实现 lib/flutter_plugin_eg.dart</a></li>
        <li><a href="#flutter-plugin中android实现">Flutter Plugin中Android实现</a></li>
        <li><a href="#flutter-plugin中ios实现">Flutter Plugin中IOS实现</a></li>
      </ul>
    </li>
    <li><a href="#发布flutter-plugin">发布Flutter Plugin</a>
      <ul>
        <li><a href="#补充文档">补充文档</a></li>
        <li><a href="#发布package">发布package</a></li>
      </ul>
    </li>
    <li><a href="#思考">思考</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍Flutter Plugin原理以及其开发和发布过程。</p>
</blockquote>
<h2 id="前言">前言</h2>
<p>Flutter优势主要体现在UI上&ndash;高性能且跨平台表现一致。但是针对平台(Android、IOS)的实现，如：获取电量、判断WiFi使用、调起WebView加载网页等，得调用特定平台的API包。Flutter Plugin就是为调用平台API而生。</p>
<p>下文中所提及到的&quot;平台&quot;指的是Android、IOS两端。</p>
<h2 id="介绍">介绍</h2>
<h3 id="flutter-plugin">Flutter Plugin</h3>
<p>包含针对Android（Java或Kotlin代码）或iOS（Objective-C或Swift代码）的原生实现，通过<code>Platform Channels</code>与FLutter(dart)层通讯并暴露API。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic1.zhimg.com/80/v2-235250ea4c16af31ed27757cf1656f18_720w.jpg"
        data-srcset="https://pic1.zhimg.com/80/v2-235250ea4c16af31ed27757cf1656f18_720w.jpg, https://pic1.zhimg.com/80/v2-235250ea4c16af31ed27757cf1656f18_720w.jpg 1.5x, https://pic1.zhimg.com/80/v2-235250ea4c16af31ed27757cf1656f18_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic1.zhimg.com/80/v2-235250ea4c16af31ed27757cf1656f18_720w.jpg"
        title="img" /></p>
<h3 id="platform-channels">Platform Channels</h3>
<ul>
<li>允许Flutter UI和平台之间传递消息。</li>
<li>Platform Channel中的消息和响应是异步传递的，以确保用户界面保持响应。</li>
<li>一个Flutter应用可以存在多个channel，使用<code>name</code>作为区分。</li>
<li>Platform Channel并非是<code>线程安全</code>，故平台跟Flutter Engine的所有交互必须在平台的<code>主线程</code>中执行的。</li>
<li>Flutter默认的消息编解码器是<a href="https://link.zhihu.com/?target=https%3A//api.flutter.dev/flutter/services/StandardMessageCodec-class.html" target="_blank" rel="noopener noreffer">StandardMessageCodec class</a>，现支持平台数据类型如下：</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic3.zhimg.com/80/v2-4d9898367e488490d0f4d106c7883b2a_720w.jpg"
        data-srcset="https://pic3.zhimg.com/80/v2-4d9898367e488490d0f4d106c7883b2a_720w.jpg, https://pic3.zhimg.com/80/v2-4d9898367e488490d0f4d106c7883b2a_720w.jpg 1.5x, https://pic3.zhimg.com/80/v2-4d9898367e488490d0f4d106c7883b2a_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic3.zhimg.com/80/v2-4d9898367e488490d0f4d106c7883b2a_720w.jpg"
        title="img" /></p>
<h2 id="创建flutter-plugin">创建Flutter Plugin</h2>
<p>接下来介绍使用Android Studio创建Flutter Plugin。使用Visual Studio Code创建的过程也是大同小异，机智的你一定能举一反三，在这里就不一一细说。</p>
<h3 id="第一步选择创建一个flutter-project">第一步：选择创建一个Flutter project</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic1.zhimg.com/80/v2-5c88bc27b9031b293ced4b8f558b1520_720w.jpg"
        data-srcset="https://pic1.zhimg.com/80/v2-5c88bc27b9031b293ced4b8f558b1520_720w.jpg, https://pic1.zhimg.com/80/v2-5c88bc27b9031b293ced4b8f558b1520_720w.jpg 1.5x, https://pic1.zhimg.com/80/v2-5c88bc27b9031b293ced4b8f558b1520_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic1.zhimg.com/80/v2-5c88bc27b9031b293ced4b8f558b1520_720w.jpg"
        title="img" /></p>
<h3 id="第二步选择flutter-project的类型为flutter-plugin">第二步：选择Flutter Project的类型为Flutter Plugin</h3>
<ul>
<li>Flutter Application 是创建一个纯flutter项目工程</li>
<li>Flutter Plugin 是创建一个可以暴露平台API的插件工程</li>
<li>Flutter Package 是创建一个纯Dart的组件包。</li>
<li>Fultter Module 是创建一个Flutter Module，用于被引入现有的原生App。</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic1.zhimg.com/80/v2-b773e4718ba6f7dfcf16ad4e400e0d7c_720w.jpg"
        data-srcset="https://pic1.zhimg.com/80/v2-b773e4718ba6f7dfcf16ad4e400e0d7c_720w.jpg, https://pic1.zhimg.com/80/v2-b773e4718ba6f7dfcf16ad4e400e0d7c_720w.jpg 1.5x, https://pic1.zhimg.com/80/v2-b773e4718ba6f7dfcf16ad4e400e0d7c_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic1.zhimg.com/80/v2-b773e4718ba6f7dfcf16ad4e400e0d7c_720w.jpg"
        title="img" /></p>
<h3 id="第三步填写project-name等工程信息完成flutter-plugin创建">第三步：填写Project name等工程信息，完成Flutter Plugin创建。</h3>
<p>工程创建完成后的目录结构如下： + lib/flutter_plugin_eg.dart 是插件包dart API实现 + android/src/main/ 是插件包API Android的实现 + ios/Classes/ 是插件包API IOS的实现 + example 是基于依赖当前插件的纯flutter示例工程，一般用作展示API调用。</p>
<p>注：从 Flutter 1.9 开始，iOS 新项目默认使用 Swift 语言，而非 Objective-C；Android 新项目则默认使用 Kotlin，而非 Java。如有需要，是可随时切换回之前的 Objective-C 或 Java。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic2.zhimg.com/80/v2-7aed24a9b311c4bf8d62d14ed771d2ed_720w.jpg"
        data-srcset="https://pic2.zhimg.com/80/v2-7aed24a9b311c4bf8d62d14ed771d2ed_720w.jpg, https://pic2.zhimg.com/80/v2-7aed24a9b311c4bf8d62d14ed771d2ed_720w.jpg 1.5x, https://pic2.zhimg.com/80/v2-7aed24a9b311c4bf8d62d14ed771d2ed_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic2.zhimg.com/80/v2-7aed24a9b311c4bf8d62d14ed771d2ed_720w.jpg"
        title="img" /></p>
<h3 id="使用android模拟器运行example工程">使用Android模拟器运行example工程</h3>
<p>我们先看看示例工程在Android模拟器上的运行效果：</p>
<p>进入example工程目录，运行lib/main.dart。</p>
<p>APP在Android模拟器运行后，可以看到屏幕出现了&quot;Running on: Android 9&quot;。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic4.zhimg.com/80/v2-e4396d3d9ef0e9f9c434e0b624320503_720w.jpg"
        data-srcset="https://pic4.zhimg.com/80/v2-e4396d3d9ef0e9f9c434e0b624320503_720w.jpg, https://pic4.zhimg.com/80/v2-e4396d3d9ef0e9f9c434e0b624320503_720w.jpg 1.5x, https://pic4.zhimg.com/80/v2-e4396d3d9ef0e9f9c434e0b624320503_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic4.zhimg.com/80/v2-e4396d3d9ef0e9f9c434e0b624320503_720w.jpg"
        title="img" /></p>
<p>接下来我们通过代码看看flutter是怎么显示出当前平台的系统版本。</p>
<h3 id="示例工程-examplelibmaindart">示例工程 example/lib/main.dart</h3>
<p>关键代码：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">...
import &#39;package:flutter_plugin_eg/flutter_plugin_eg.dart&#39;;
...
platformVersion = await FlutterPluginEg.platformVersion;
...
setState(() {
  _platformVersion = platformVersion;
});
...
body: Center(
  child: Text(&#39;Running on: $_platformVersion\n&#39;),
)
</code></pre></td></tr></table>
</div>
</div><p>示例工程中的lib/main.dart引入了我们刚刚创建Flutter Plugin中dart API实现<code>flutter_plugin_eg.dart</code>。</p>
<p>随后使用异步的方式调用<code>flutter_plugin_eg.dart</code> 的<code>FlutterPluginEg.platformVersion</code>并把返回值赋值给<code>platformVersion</code>，随后通过<code>setState</code>方法把<code>platformVersion</code>的值赋值给当前状态组件的<code>_platformVersion</code>，触发UI重渲把<code>_platformVersion</code>的值&quot;Android 9&quot;显示出来。</p>
<h3 id="flutter-plugin中dart-api实现-libflutter_plugin_egdart">Flutter Plugin中dart API实现 lib/flutter_plugin_eg.dart</h3>
<p>全量代码：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">import &#39;dart:async&#39;;

import &#39;package:flutter/services.dart&#39;;

class FlutterPluginEg {
  static const MethodChannel _channel =
      const MethodChannel(&#39;flutter_plugin_eg&#39;);

  static Future&lt;String&gt; get platformVersion async {
    final String version = await _channel.invokeMethod(&#39;getPlatformVersion&#39;);
    return version;
  }
}
</code></pre></td></tr></table>
</div>
</div><ul>
<li><code>service.dart</code>暴露与平台通讯的API，如:<code>MethodChannel</code>Platform Channel的一种类型</li>
<li><code>_channel</code>是FlutterPluginEg类的属性，是一个实例化的<code>MethodChannel</code>,<code>name</code>为&quot;flutter_plugin_eg&quot;</li>
<li><code>platformVersion</code>是FlutterPluginEg类的静态<code>可计算属性</code>，会异步返还一个String。</li>
<li><code>platformVersion</code>中，调用<code>_channel</code>的<code>invokeMethod</code>方法，入参&quot;getPlatformVersion&quot;为调用平台约定的方法名。然后把<code>invokeMethod</code>的异步结果赋值给<code>String version</code>作为<code>platformVersion</code>的返回值。</li>
</ul>
<h3 id="flutter-plugin中android实现">Flutter Plugin中Android实现</h3>
<p>android/src/main/kotlin/&hellip;/FlutterPluginEgPlugin.kt 全量代码：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">package com.yy.flutter_plugin_eg

import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar

class FlutterPluginEgPlugin: MethodCallHandler {
  companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar) {
      val channel = MethodChannel(registrar.messenger(), &#34;flutter_plugin_eg&#34;)
      channel.setMethodCallHandler(FlutterPluginEgPlugin())
    }
  }

  override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == &#34;getPlatformVersion&#34;) {
      result.success(&#34;Android ${android.os.Build.VERSION.RELEASE}&#34;)
    } else {
      result.notImplemented()
    }
  }
}
</code></pre></td></tr></table>
</div>
</div><blockquote>
<p>再次强调：一个Flutter应用是可以有多个<code>channel</code>，并而每个<code>channel</code>都可以有多个<code>method</code>，所以需要重点了解平台的代码是通过怎么样去对接channel name 与method name。从上文.kt源码可以看到:</p>
</blockquote>
<ul>
<li>注册MethodChannel约定通道名&quot;flutter_plugin_eg&quot;，并开始监听通道消息。</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar) {
      val channel = MethodChannel(registrar.messenger(), &#34;flutter_plugin_eg&#34;)
      channel.setMethodCallHandler(FlutterPluginEgPlugin())
    }
  }
</code></pre></td></tr></table>
</div>
</div><ul>
<li>实现onMethodCall方法，判断方法名&quot;getPlatformVersion&quot;，返回<code>Android ${android.os.Build.VERSION.RELEASE}</code></li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == &#34;getPlatformVersion&#34;) {
      result.success(&#34;Android ${android.os.Build.VERSION.RELEASE}&#34;)
    } else {
      result.notImplemented()
    }
  }
</code></pre></td></tr></table>
</div>
</div><p>当channel name 和 method name 约定后，Flutter Plugin就可以在dart中方便调用平台的实现，并暴露API供Flutter项目使用。</p>
<h3 id="flutter-plugin中ios实现">Flutter Plugin中IOS实现</h3>
<p>ios/Classes/SwiftFlutterPluginEgPlugin.swift</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">import Flutter
import UIKit

public class SwiftFlutterPluginEgPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: &#34;flutter_plugin_eg&#34;, binaryMessenger: registrar.messenger())
    let instance = SwiftFlutterPluginEgPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    result(&#34;iOS &#34; + UIDevice.current.systemVersion)
  }
}
</code></pre></td></tr></table>
</div>
</div><p>可以看出，IOS与Android实现思路雷同：通过&quot;flutter_plugin_eg&quot;注册<code>FlutterMethodChannel</code>并开始监听。</p>
<blockquote>
<p>但惊奇发现Flutter Plugin中swift默认生成的代码居然没FlutterMethodCall方法名判断，在swift断点看是能获取到&quot;getPlatformVersion&quot;这个方法名的。</p>
</blockquote>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic4.zhimg.com/80/v2-52dda6ae7529c22381fac4ba90194cdf_720w.jpg"
        data-srcset="https://pic4.zhimg.com/80/v2-52dda6ae7529c22381fac4ba90194cdf_720w.jpg, https://pic4.zhimg.com/80/v2-52dda6ae7529c22381fac4ba90194cdf_720w.jpg 1.5x, https://pic4.zhimg.com/80/v2-52dda6ae7529c22381fac4ba90194cdf_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic4.zhimg.com/80/v2-52dda6ae7529c22381fac4ba90194cdf_720w.jpg"
        title="img" /></p>
<p>IOS模拟器上运行效果：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://pic3.zhimg.com/80/v2-c7ed6b618cc76f44483d2a868d50ef6e_720w.jpg"
        data-srcset="https://pic3.zhimg.com/80/v2-c7ed6b618cc76f44483d2a868d50ef6e_720w.jpg, https://pic3.zhimg.com/80/v2-c7ed6b618cc76f44483d2a868d50ef6e_720w.jpg 1.5x, https://pic3.zhimg.com/80/v2-c7ed6b618cc76f44483d2a868d50ef6e_720w.jpg 2x"
        data-sizes="auto"
        alt="https://pic3.zhimg.com/80/v2-c7ed6b618cc76f44483d2a868d50ef6e_720w.jpg"
        title="img" /></p>
<h2 id="发布flutter-plugin">发布Flutter Plugin</h2>
<p>轮子造好后，可以发布到<a href="https://link.zhihu.com/?target=https%3A//pub.dev/" target="_blank" rel="noopener noreffer">pub.dev</a>，以下内容纯属搬砖。</p>
<h3 id="补充文档">补充文档</h3>
<p>在Flutter Plugin根目录添加 + README.md:介绍包的文件 + CHANGELOG.md 记录每个版本中的更改 + LICENSE 包含软件包许可条款的文件 + <a href="https://link.zhihu.com/?target=https%3A//dart.dev/guides/language/effective-dart/documentation" target="_blank" rel="noopener noreffer">编写API文档</a></p>
<h3 id="发布package">发布package</h3>
<p>一旦你实现了一个包，你可以在<a href="https://link.zhihu.com/?target=https%3A//pub.dev/" target="_blank" rel="noopener noreffer">Pub</a>上发布它 ，这样其他开发人员就可以轻松使用它</p>
<p>在发布之前，检查pubspec.yaml、README.md以及CHANGELOG.md文件，以确保其内容的完整性和正确性。</p>
<p>然后, 运行 dry-run 命令以查看是否都准备OK了:</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">flutter packages pub publish --dry-run
</code></pre></td></tr></table>
</div>
</div><p>最后, 运行发布命令:</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">flutter packages pub publish
</code></pre></td></tr></table>
</div>
</div><p>有关发布的详细信息，请参阅<a href="https://link.zhihu.com/?target=https%3A//dart.dev/tools/pub/publishing" target="_blank" rel="noopener noreffer">Pub publishing docs</a></p>
<h2 id="思考">思考</h2>
<p>开发一个功能完备的APP，说到底还是需要有原生平台开发的能力，就如Flutter Plugin需要开发原生平台部分。相信有很多Web前端童鞋也开始接触Flutter，但是如果不去深入了解原生开发，那么也只能停留在UI层上。</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2021-05-19</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a>,&nbsp;<a href="/tags/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/flutter/flutter%E5%AD%A6%E4%B9%A0%E7%9B%AE%E5%BD%95/" class="prev" rel="prev" title="《Flutter学习目录00》"><i class="fas fa-angle-left fa-fw"></i>《Flutter学习目录00》</a>
            <a href="/posts/flutter/Flutter%E8%8E%B7%E5%8F%96%E9%80%9A%E8%AE%AF%E5%BD%95%E5%A5%BD%E5%8F%8B/" class="next" rel="next" title="《Flutter获取通讯录好友02》">《Flutter获取通讯录好友02》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">飞雪无情</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
